<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="javascript/jquery.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <style>
        .layui-table tbody tr:hover {
            background-color: white;
        }
    </style>
</head>
<body>
<!--
    @Author: LuXi
    用户详情页
-->
<section class="page-hd">
    <header>
        <h3 class="title"><font color="#d3d3d3">
            <button type="button" onclick="turnBack()" class=" layui-btn layui-btn-primary layui-btn-sm" ><i class=" layui-icon layui-icon-left" style="font-size: 25px;font-weight: bold"></i></button>
            用户管理</font>/<font>用户</font>/<font>用户详情</font></h3>
    </header>

</section>

<form id="edit_form">
    <input type="hidden" name="userid" />
    <table class="layui-table" lay-skin="nob" style="text-align: left;">
        <tr style="text-align: left;">
            <td colspan="2">
                <i class="layui-icon layui-icon-file-b" style="color: deepskyblue;font-size: 25px;" ></i>
                    <font color="#d3d3d3" size="5">基本信息</font>

            </td>
            <td style="text-align: right;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="edit_change" class="btn btn-primary">编辑资料</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="cancel_change" onclick="del_user()" class="btn btn-default">删除用户</button>
            </td>
        </tr>

        <tr>
            <td>手机号:
                &nbsp;&nbsp;&nbsp;
                <span id="phone"></span></td>
            <td>昵称:
                &nbsp;&nbsp;&nbsp;
                <span id="name"></span></td>
            <td>性别:
                &nbsp;&nbsp;&nbsp;
                <span id="sex"></span></td>
        </tr>
        <tr>
            <td>用户类型:
                &nbsp;&nbsp;&nbsp;
                <span id="type"></span></td>
            <td>注册时间:
                &nbsp;&nbsp;&nbsp;
                <span id="time"></span></td>
            <td>订单总数:
                &nbsp;&nbsp;&nbsp;
                <span id="count"></span></td>
        </tr>
        <tr>
            <td colspan="3">
                累计消费（元）:
                &nbsp;&nbsp;&nbsp;
                <span id="money"></span>
            </td>
        </tr>
    </table>
</form>
<table class="layui-table" lay-skin="line">
    <tr style="text-align: left;">
        <td>
            <i class="layui-icon layui-icon-file-b" style="color: deepskyblue;font-size: 25px;" ></i>
            <font color="#d3d3d3" size="5">订单记录</font>
        </td>
<!--        <td style="text-align: right;">-->
<!--            <button class="btn btn-primary btn-sm" >报表导出</button>-->
<!--        </td>-->
    </tr>
    <tr>
        <td colspan="2" style="border: 2px solid lightskyblue;background-color: #DDF1FF;">
            订单总数:&nbsp;&nbsp;&nbsp;
            <span id="table_count"></span>
        </td>
    </tr>
    <tr>

    </tr>
    <table class="layui-table" lay-skin="nob">
        <td colspan="2">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>所属医院</th>
                    <th>所属科室</th>
                    <th>实际支付</th>
                    <th>下单时间</th>
                    <th>租用时长</th>
                </tr>
            </thead>
            <tbody id="table_order">

            </tbody>
        </td>
    </table>
</table>

<!-- 删除模态框-->
<div class="modal fade" id="modal_delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户删除</h4>
            </div>
            <div class="modal-body">
                <h2>您确认删除该用户吗？删除后有关用户信息会全部删除哦</h2>
            </div>
            <div class="modal-footer">
                <button id="user_delete" type="button" class="btn btn-default">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use("form",function () {
        var form = layui.form;
    });

    //展示详情
    show();
    function show() {
        var userid = window.localStorage.getItem("userid");

        //隐藏域
        $(":input[name=userid]").val(userid);

        $.ajax({
            url:"/yonghu/details",
            type:"post",
            data:{"userid":userid},
            success:function (data) {
                if(data.result){
                    $("#phone").text(data.user.userphone);
                    $("#name").text(data.user.username);
                    $("#sex").text(data.user.usersex == 1 ? '男' : '女');
                    $("#type").text(data.user.usertype == 1 ? '新用户' : '老用户');
                    $("#time").text(data.user.userregistrationtime);
                    $("#count").text(data.user.count+"次");
                    $("#table_count").text(data.user.count);
                    $("#money").text(data.user.money+"元");
                    if(data.orderList != null){
                        var list = "";
                        var count = 0;
                        $.each(data.orderList,function (index,order){
                            list += "<tr>";
                            list += "<td>"+order.userordernum+"</td>";
                            list += "<td>"+order.hospital+"</td>";
                            list += "<td>"+order.department+"</td>";
                            list += "<td>￥"+order.userorderrent+"</td>";
                            list += "<td>"+order.userorderstarttime+"</td>";
                            list += "<td>"+order.userorderleasetime+"</td>";
                            list += "</tr>";
                            count++;
                        });
                        $("#table_order").html(list);
                        if(count == 0){
                            $("#table_order").html("<tr><td colspan='6'>无订单</td></tr>");
                        }
                    }
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('Error... ！', {icon: 5});
                    });
                }
            }
        });
    }

    function del_user() {
        if($("#cancel_change").text() == "删除用户"){
            var userid = window.localStorage.getItem("userid");
            $("#modal_delete").modal("show");
            $("#user_delete").click(function () {
                $.ajax({
                    type:"post",
                    url:"/yonghu/delete",
                    data:{"userid":userid},
                    success:function (data) {
                        if(data.result){
                            $("#modal_delete").modal("hide");
                            location.href="YongHuShowTable.html";
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg('Error... ！', {icon: 5});
                            });
                        }
                    }
                });
            });
        }
        if($("#cancel_change").text() == "取消"){
            show();
            $("#edit_change").text("编辑资料");
            $("#cancel_change").text("删除用户");
        }
    }
    //编辑用户
    change_user();
    function change_user() {
        var phone = "";
        var name = "";
        var sex = "";
        $("#edit_change").click(function () {
            if ($(this).text() == "编辑资料") {
                $(this).text("保存");
                $("#cancel_change").text("取消");
                $("#phone").html("<input type='text' name='userphone' value='"+$("#phone").text()+"'  />");
                $("#name").html("<input type='text' name='username' value='"+$("#name").text()+"'  />");
                $("#sex").html("<input type='text' name='usersex' value='"+$("#sex").text()+"'  />");
                phone = $(":input[name=userphone]").val()
                name = $(":input[name=username]").val()
                sex = $(":input[name=usersex]").val()
            }else{
                $(":input[name=usersex]").val($(":input[name=usersex]").val() == "男" ? 1 : 2);
                $.ajax({
                    url:"/yonghu/edit",
                    type:"post",
                    data:$("#edit_form").serialize(),
                    success:function (data){
                        if(data.result){
                            show();
                            $("#edit_change").text("编辑资料");
                            $("#cancel_change").text("删除用户");
                        }else{
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg('Error... ！', {icon: 5});
                            });
                        }
                    }
                });

            }
        });
    }
    function turnBack() {
        location.href="YongHuShowTable.html";
    }
</script>

</body>
</html>